<template>
	<view class="login">
		<view class="login-input flex-center">
			<input placeholder="请输入手机号" v-model="phoneNumber" type="number" placeholder-class="placeholder" />
		</view>
		<view class="login-input flex-center">
			<input placeholder="请输入密码" v-model="passwd" password=true placeholder-class="placeholder" />
		</view>
		<view class="submit-btn">
			<button @click="submit">登录</button>
		</view>
		<view class="nav flex-center-between">
			<view @click="pageTo('resetpasswd')">忘记密码</view>
			<view @click="pageTo('register')">我要注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: uni.getStorageSync('PHONE') || '',
				passwd:'',
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 登录
			 */
			async submit() {
				if (!this.checkPhone()) return false
				if (!this.checkPsw()) return false
				let res = await this.$http.request({
					method: 'post',
					url: '/api/account/login',
					data: {
						account: this.phoneNumber,
						password: this.passwd
					}
				})
				if (res.status === 1) {
					uni.setStorageSync('USER_INFO', res.data.userinfo)
					uni.setStorageSync('PHONE', this.phoneNumber)
					uni.switchTab({url: '/pages/index/index'})
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			
			/**
			 * 校验手机号
			 */
			checkPhone() {
				if (!(/^1[3456789]\d{9}$/.test(this.phoneNumber))){
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false
				} else return true
			},
			
			/**
			 * 校验密码
			 */
			checkPsw() {
				if (!(/^[a-zA-Z0-9]{6,12}$/.test(this.passwd))){
					uni.showToast({
						title: '请输入由字母或数字组成的6～12位密码',
						icon: 'none'
					})
					return false
				} else return true
			},
			
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page){
				uni.hideKeyboard()
				uni.navigateTo({
					url: page
				});
			},
		}
	}
</script>

<style lang="scss">
	.login {
		box-sizing: border-box;
		height: 100%;
		padding: 50rpx 50rpx 0;
		background: $uni-bg-color;
		.login-input{
			height: 90rpx;
			border-bottom: 1rpx solid $uni-border-color;
			margin-top: 30rpx;
			input{
				width: 100%;
			}
		}
		.placeholder{
			color: $uni-text-color-placeholder;
		}
		.nav {
			color: $uni-color-theme;
			font-size: $uni-font-size-sm2;
		}
	}
</style>
